<template>
  <view>
    <view class="page-title" style="margin-top: 20rpx; font-size: 40rpx; color: #333333;text-align: center;">店铺二维码</view>
    <view style="display: flex; align-items: center; justify-content: center; margin-top: 100rpx; margin-bottom: 50rpx">
      <tki-qrcode
        ref="qrcode"
        :cid="cid"
        :val="qrValue"
        size="500"
        :unit="unit"
        background="#fff"
        :foreground="foreground"
        :pdground="pdground"
        :icon="icon"
        :iconSize="iconsize"
        :onval="onval"
        :loadMake="loadMake"
        :usingComponents="usingComponents"
        :showLoading="showLoading"
        :loadingText="loadingText"
        @result="qrR"
      />
      <!-- <button @click="_generateQrCode">生成二维码</button> -->
    </view>
    <view style="width: 100%">
      <button style="width: 100%; background-color: #2979ff; color: white" @click="getcode">保存二维码</button>
    </view>
  </view>
</template>

<script>
import TkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';

export default {
  components: {
    TkiQrcode
  },
  data() {
    return {
      cid: 'tki-qrcode-canvas',
      qrValue: '',
      unit: 'upx',
      foreground: '#000000',
      pdground: '#000000',
      icon: '',
      iconsize: 40,
      onval: false,
      loadMake: true,
      usingComponents: true,
      showLoading: true,
      loadingText: '二维码生成中'
    };
  },
  onLoad() {
    const merId = uni.getStorageSync('merId');
    if (merId) {
      this.qrValue = `https://www.wantongkonggu.cn/apph7/pages/index_tabs/local_life/detail?id=${merId} `;
    } else {
      console.error('merId未找到');
    }
  },
  methods: {
    // 定义一个方法来调用子组件的 _makeCode 方法
    _generateQrCode() {
      this.$refs.qrcode._makeCode();
    },
    // 处理二维码生成结果的方法
    qrR(result) {
      console.log('二维码生成结果:', result);
    },
    getcode() {
      this.$refs.qrcode._saveCode();
    }
  }
};
</script>
